<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
            line-height: 1.6;
        }

        header, footer {
            background: #35424a;
            color: #ffffff;
            text-align: center;
            padding: 20px 0;
        }

        nav {
            background-color: #35424a;
            padding: 15px 0;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center; /* 添加对齐方式 */
            margin-right: 365px;
        }

        nav ul li {
            margin: 0 15px;
        }

        nav ul li a {
            color: #ffffff;
            text-decoration: none;
            transition: color 0.3s;
        }

        nav ul li a:hover {
            color: #ffcc00;
        }

        nav form {
            display: flex; /* 使搜索框和按钮处于同一行 */
            align-items: center; /* 垂直居中对齐搜索框 */
            margin-left: 20px; /* 增加左侧外边距，使搜索框与菜单项之间有间距 */
        }

        nav input[type="text"] {
            padding: 8px;
            border: none;
            border-radius: 3px;
            margin-right: 10px;
            width: 600px;
        }

        nav input[type="submit"] {
            padding: 8px 12px;
            background-color: #ffcc00;
            border: none;
            border-radius: 3px;
            color: #fff;
            cursor: pointer;
        }

        nav input[type="submit"]:hover {
            background-color: #e0b800; /* 修改 hover 背景色 */
        }

        .container {
            display: flex;
            justify-content: center;
            width: 80%;
            margin: auto;
        }

        .main-content {
            flex: 3;
            margin-right: 20px;
        }

        article {
            background: #ffffff;
            border: 1px solid #ddd;
            margin: 20px 0;
            padding: 20px;
            border-radius: 5px;
            transition: box-shadow 0.3s;
        }

        article:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        aside {
            background: #ffffff;
            border: 1px solid #ddd;
            padding: 15px;
            border-radius: 5px;
            flex-basis: 200px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
        }

        h2, h3 {
            color: #333;
            margin-top: 0;
        }

        .meta {
            font-size: 0.85em;
            color: #777;
            margin: 10px 0;
        }

        footer {
            padding: 30px;
            text-align: center;
        }
        
        .tag-cloud {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 10px; /* 增加标签云的顶部外边距 */
        }

        .tag-cloud a {
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-decoration: none;
            color: #333;
            background-color: #f2f2f2;
            transition: background-color 0.3s, transform 0.3s; /* 添加缩放效果 */
        }

        .tag-cloud a:hover {
            background-color: #e0e0e0;
            transform: scale(1.05); /* 增加 hover 时的缩放效果 */
        }

        aside h2, aside h3 {
            color: #35424a; /* 修改标题颜色 */
            margin-top: 0;
            border-bottom: 2px solid #f4f4f4; /* 添加底部边框 */
            padding-bottom: 5px; /* 添加底部内边距 */
        }

        aside ul {
            list-style-type: none;
            padding: 0;
        }

        aside ul li {
            margin: 10px 0; /* 调整列表项的上下间距 */
        }

        aside ul li a {
            text-decoration: none;
            color: #35424a; /* 修改链接颜色 */
            padding: 5px 10px; /* 增加链接的内边距 */
            border-radius: 3px; /* 添加圆角效果 */
            transition: background-color 0.3s; /* 添加过渡效果 */
        }

        aside ul li a:hover {
            background-color: #a1d4da; /* 修改 hover 背景色 */
        }

        @media (max-width: 768px) {
            .container {
                flex-direction: column;
                align-items: center;
            }

            .main-content {
                margin-right: 0;
                width: 100%;
            }

            aside {
                width: 100%;
                margin-top: 20px;
            }

            nav ul {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>

<header>
    <h1>欢迎来到我的博客</h1>
</header>
<main class="container">
    <div class="main-content">
        <h2>搜索结果</h2>
        <!-- 文章列表 -->
        {% if articles %}
            {% for article in articles %}
                <article>
                    <h2>{{ article.title }}</h2>
                    <p class="meta">作者: {{ article.author }} | 发布时间: {{ article.create_time }} |
                        分类：{{ article.classifier }} | 标签：{% for tag in article.tag.all %}{{ tag.name }}
                            {% if not forloop.last %}, {% endif %}{% endfor %}</p>
                    <p>{{ article.excerpt }}</p>
                    <a href="/detail/{{ article.id }}">阅读全文</a>
                </article>
            {% endfor %}
        {% else %}
            <p>暂无文章</p>
        {% endif %}
    </div>
</main>

<footer>
    <p>&copy; 2024 我的博客. 保留所有权利.</p>
</footer>
</body>
</html>
